<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>360°全景</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body style="margin-top: 1px;"><param name="allowScriptAccess" value="always">
<script type="text/javascript">
    // hide URL field on the iPhone/iPod touch
    function hideUrlBar() {
        if (((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))) {
            container = document.getElementById("container");
            if (container) {
                var cheight;
                switch(window.innerHeight) {
                    case 208:cheight=268; break; // landscape
                    case 260:cheight=320; break; // landscape, fullscreen
                    case 336:cheight=396; break; // portrait, in call status bar
                    case 356:cheight=416; break; // portrait
                    case 424:cheight=484; break; // portrait iPhone5, in call status bar
                    case 444:cheight=504; break; // portrait iPhone5
                    default:
                        cheight=window.innerHeight;
                }
                if ((cheight) && ((container.offsetHeight!=cheight) || (window.innerHeight!=cheight))) {
                    container.style.height=cheight + "px";
                    setTimeout(function() { hideUrlBar(); }, 1000);
                }
            }
        }

        document.getElementsByTagName("body")[0].style.marginTop="1px";
        window.scrollTo(0, 1);
    }
    window.addEventListener("load", hideUrlBar);
    window.addEventListener("resize", hideUrlBar);
    window.addEventListener("orientationchange", hideUrlBar);
</script>
<style type="text/css" title="Default">
    body, div, h1, h2, h3, span, p {
        font-family: Verdana,Arial,Helvetica,sans-serif;
        color: #000000;
    }
        /* fullscreen */
    html {
        height:100%;
    }
    body {
        height:100%;
        margin: 0px;
        overflow:hidden; /* disable scrollbars */
    }
    body {
        font-size: 10pt;
        background : #ffffff;
    }
    table,tr,td {
        font-size: 10pt;
        border-color : #777777;
        background : #dddddd;
        color: #000000;
        border-style : solid;
        border-width : 2px;
        padding: 5px;
        border-collapse:collapse;
    }
    h1 {
        font-size: 18pt;
    }
    h2 {
        font-size: 14pt;
    }
    .warning {
        font-weight: bold;
    }
        /* fix for scroll bars on webkit & Mac OS X Lion */
    ::-webkit-scrollbar {
        background-color: rgba(0,0,0,0.5);
        width: 0.75em;
    }
    ::-webkit-scrollbar-thumb {
        background-color:  rgba(255,255,255,0.5);
    }
</style>
<script type="text/javascript" src="{:ADDON_PUBLIC_PATH}/js/pano2vr_player.js"></script>
<div id="container" style="width:100%;height:100%;"><div style="top: 0px; left: 0px; position: relative;"><div style="top: 0px; left: 0px; width: 1097px; height: 143px; overflow: hidden; position: absolute; z-index: 0; -webkit-user-select: none;"><canvas width="1097" height="143"></canvas></div><div style="top: 0px; left: 0px; width: 1097px; height: 143px; overflow: hidden; position: absolute; z-index: 100; -webkit-user-select: none; cursor: auto;"><div style="position: absolute; -webkit-user-select: none; -webkit-transition: none; transition: none; left: -100px; top: -100px; -webkit-transform: scale(0, 0);"><img src="" style="position: absolute;top: -14px;left: -14px;display:none;"></div><div style="position: absolute; -webkit-user-select: none; -webkit-transition: none; transition: none; left: -100px; top: -100px; -webkit-transform: scale(0, 0);"><img src="" style="position: absolute;top: -14px;left: -14px;display:none;"></div><div style="position: absolute; -webkit-user-select: none; -webkit-transition: none; transition: none; left: -100px; top: -100px; -webkit-transform: scale(0, 0);"><img src="" style="position: absolute;top: -14px;left: -14px;display:none;"></div><div style="position: absolute; -webkit-user-select: none; -webkit-transition: none; transition: none; left: -100px; top: -100px; -webkit-transform: scale(0, 0);"><img src="" style="position: absolute;top: -14px;left: -14px;display:none;"></div></div><canvas style="top: 0px; left: 0px; width: 1097px; height: 143px; overflow: hidden; position: absolute; z-index: 900; -webkit-user-select: none; visibility: hidden;" width="1097" height="143"></canvas><div style="top: 0px; left: 0px; position: absolute; padding: 3px; visibility: hidden; z-index: 1100;"></div></div></div>
<script type="text/javascript">
    // create the panorama player with the container
    pano=new pano2vrPlayer("container");
    //pano.readConfigUrl('./source/modules/ipano/template/image.xml');
		<php>
		$param ['token'] = get_token ();
		$param ['openid'] = get_openid ();
		$param ['id'] = $id;
		$Url = addons_url ( 'Panorama://Panorama/imgXml', $param );
		</php>
	var url = '{$Url}';
    pano.readConfigUrl(url);
    // hide the URL bar on the iPhone
    hideUrlBar();
</script>
<noscript>
    &lt;p&gt;&lt;b&gt;Please enable Javascript!&lt;/b&gt;&lt;/p&gt;
</noscript>
<style type="text/css">
    body { margin-bottom:60px !important; }
    a, button, input { -webkit-tap-highlight-color:rgba(255, 0, 0, 0); }
    ul, li { list-style:none; margin:0; padding:0 }
    .top_bar { position: fixed; z-index: 900; bottom: 0; left: 0; right: 0; margin: auto; font-family: Helvetica, Tahoma, Arial, Microsoft YaHei, sans-serif; }
    .top_menu { display:-webkit-box; border-top: 1px solid #3D3D46; display: block; width: 100%; background: rgba(255, 255, 255, 0.7); height: 48px; display: -webkit-box; display: box; margin:0; padding:0; -webkit-box-orient: horizontal; background: -webkit-gradient(linear, 0 0, 0 100%, from(#524945), to(#48403c), color-stop(60%, #524945)); box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1) inset; }
    .top_bar .top_menu>li { -webkit-box-flex:1; position:relative; text-align:center; }
    .top_menu li:first-child { background:none; }
    .top_bar .top_menu>li>a { height:48px; margin-right: 1px; display:block; text-align:center; color:#FFF; text-decoration:none; text-shadow: 0 1px rgba(0, 0, 0, 0.3); -webkit-box-flex:1; }
    .top_bar .top_menu>li.home { max-width:70px }
    .top_bar .top_menu>li.home a { height: 66px; width: 66px; margin: auto; border-radius: 60px; position: relative; top: -22px; left: 2px; background: url(http://bcs.duapp.com/baeimg/KRRvB8Lure.png) no-repeat center center; background-size: 100% 100%; }
    .top_bar .top_menu>li>a label { overflow:hidden; margin: 0 0 0 0; font-size: 12px; display: block !important; line-height: 18px; text-align: center; }
    .top_bar .top_menu>li>a img { padding: 3px 0 0 0; height: 24px; width: 24px; color: #fff; line-height: 48px; vertical-align:middle; }
    .top_bar li:first-child a { display: block; }
    .menu_font { text-align:left; position:absolute; right:10px; z-index:500; background: -webkit-gradient(linear, 0 0, 0 100%, from(#524945), to(#48403c), color-stop(60%, #524945)); border-radius: 5px; width: 120px; margin-top: 10px; padding: 0; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); }
    .menu_font.hidden { display:none; }
    .menu_font { top:inherit !important; bottom:60px; }
    .menu_font li a { height:40px; margin-right: 1px; display:block; text-align:center; color:#FFF; text-decoration:none; text-shadow: 0 1px rgba(0, 0, 0, 0.3); -webkit-box-flex:1; }
    .menu_font li a { text-align: left !important; }
    .top_menu li:last-of-type a { background: none; overflow:hidden; }
    .menu_font:after { top: inherit!important; bottom: -6px; border-color: #48403c rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); border-width: 6px 6px 0; position: absolute; content: ""; display: inline-block; width: 0; height: 0; border-style: solid; left: 80%; }
    .menu_font li { border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
    .menu_font li:first-of-type { border-top: 0; }
    .menu_font li:last-of-type { border-bottom: 0; }
    .menu_font li a { height: 40px; line-height: 40px !important; position: relative; color: #fff; display: block; width: 100%; text-indent: 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
    .menu_font li a img { width: 20px; height:20px; display: inline-block; margin-top:-2px; color: #fff; line-height: 40px; vertical-align:middle; }
    .menu_font>li>a label { padding:3px 0 0 3px; font-size:14px; overflow:hidden; margin: 0; }
    #menu_list0 { right:0; left:10px; }
    #menu_list0:after { left: 20%; }
    #sharemcover { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: none; z-index: 20000; }
    #sharemcover img { position: fixed; right: 18px; top: 5px; width: 260px; height: 180px; z-index: 20001; border:0; }
    .top_bar .top_menu>li>a:hover, .top_bar .top_menu>li>a:active { background-color:#333; }
    .menu_font li a:hover, .menu_font li a:active { background-color:#333; }
    .menu_font li:first-of-type a { border-radius:5px 5px 0 0; }
    .menu_font li:last-of-type a { border-radius:0 0 5px 5px; }
    #plug-wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); z-index:800; }
    #cate18 .device {bottom: 49px;}
    #cate18 #indicator {bottom: 240px;}
    #cate19 .device {bottom: 49px;}
    #cate19 #indicator {bottom: 330px;}
    #cate19 .pagination {bottom: 60px;}
</style>

<div id="plug-wrap" onclick="closeall()" style="display: none;"></div>
<script>
    function displayit(n){
        var count = document.getElementById("top_menu").getElementsByTagName("ul").length;
        for(i=0;i<count;i++){
            if(i==n){
                if(document.getElementById("top_menu").getElementsByTagName("ul").item(n).style.display=='none'){
                    document.getElementById("top_menu").getElementsByTagName("ul").item(n).style.display='';
                    document.getElementById("plug-wrap").style.display='';
                }else{
                    document.getElementById("top_menu").getElementsByTagName("ul").item(n).style.display='none';
                    document.getElementById("plug-wrap").style.display='none';
                }
            }else{
                document.getElementById("top_menu").getElementsByTagName("ul").item(i).style.display='none';
            }
        }
    }
    function closeall(){
        var count = document.getElementById("top_menu").getElementsByTagName("ul").length;
        for(i=0;i<count;i++){
            document.getElementById("top_menu").getElementsByTagName("ul").item(i).style.display='none';
        }
        document.getElementById("plug-wrap").style.display='none';
    }
    document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
        WeixinJSBridge.call('hideToolbar');
    });
</script>
</body>
</html